import Image from 'next/image';
import Link from 'next/link';
import { services } from './services/data';
import { projects } from './projects/data';
import { certifications } from './certifications/data';
import { testimonials } from './testimonials/data';
import { careerExperiences } from './career/data';
import { radarSkills } from './skills/data';
import { faqs } from './faq/data';
import AnimatedBackground from './components/AnimatedBackground';
import TechHud from './components/TechHud';
import TestimonialCarousel from './components/TestimonialCarousel';
import CareerTimeline from './components/CareerTimeline';
import SkillRadarChart from './components/SkillRadarChart';

export default function Home() {
  // 获取特色项目
  const featuredProjects = projects.filter(project => project.featured).slice(0, 3);
  
  // 获取特色证书
  const featuredCerts = certifications.filter(cert => cert.featured).slice(0, 4);
  
  // 获取最近的职业经历（前3条）
  const recentExperiences = careerExperiences.slice(0, 3);

  return (
    <div className="min-h-screen">
      {/* 头图 */}
      <section className="bg-gradient-to-r from-primary-500 to-primary-600 text-white py-20 relative overflow-hidden">
        {/* 动态背景 */}
        <div className="absolute inset-0">
          <AnimatedBackground />
        </div>
        
        {/* 科技感HUD */}
        <TechHud />
        
        <div className="container mx-auto px-4 relative z-10">
          <div className="flex flex-col md:flex-row items-center justify-between">
            <div className="md:w-1/2 text-center md:text-left mb-10 md:mb-0">
              <h1 className="text-4xl md:text-5xl font-bold mb-4">余莉莎</h1>
              <p className="text-xl md:text-2xl mb-8">多领域专业人士</p>
              <button className="btn-primary bg-white text-primary-600 hover:bg-primary-50">
                联系我
              </button>
            </div>
            <div className="md:w-1/2 flex justify-center">
              <div className="relative w-64 h-64 rounded-full overflow-hidden border-4 border-white shadow-lg">
                {/* 头像光晕效果 */}
                <div className="absolute inset-0 bg-primary-400 opacity-20 animate-pulse"></div>
                <div className="absolute -inset-1 bg-white opacity-20 animate-spin-slow rounded-full"></div>
                
                <img 
                  src="/images/Photo02.jpg" 
                  alt="余莉莎个人照片" 
                  className="absolute inset-0 w-full h-full object-cover"
                />
                
                {/* 科技感装饰元素 */}
                <div className="absolute top-0 left-0 w-full h-full">
                  <div className="absolute top-0 left-1/2 w-1 h-8 bg-white opacity-70 transform -translate-x-1/2"></div>
                  <div className="absolute bottom-0 left-1/2 w-1 h-8 bg-white opacity-70 transform -translate-x-1/2"></div>
                  <div className="absolute top-1/2 left-0 w-8 h-1 bg-white opacity-70 transform -translate-y-1/2"></div>
                  <div className="absolute top-1/2 right-0 w-8 h-1 bg-white opacity-70 transform -translate-y-1/2"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 关于我 */}
      <section id="about" className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-center">关于我</h2>
          <div className="flex flex-col md:flex-row gap-8 max-w-5xl mx-auto">
            <div className="md:w-1/2">
              <div className="grid grid-cols-2 gap-4">
                <div className="overflow-hidden rounded-lg shadow-md">
                  <img 
                    src="/images/Photo01.jpg" 
                    alt="余莉莎照片1" 
                    className="w-full h-auto object-cover transition-transform hover:scale-105"
                  />
                </div>
                <div className="overflow-hidden rounded-lg shadow-md">
                  <img 
                    src="/images/Photo02.jpg" 
                    alt="余莉莎照片2" 
                    className="w-full h-auto object-cover transition-transform hover:scale-105"
                  />
                </div>
              </div>
            </div>
            <div className="md:w-1/2">
              <div className="text-lg text-gray-700">
                <p className="mb-4">
                  您好，我是余莉莎（Lisa），一位在多个领域拥有专业经验的人才。我致力于将专业知识与实践经验相结合，
                  为客户提供高质量的服务与解决方案。
                </p>
                <p>
                  凭借在数据安全、科技教育、新媒体运营、高精密加工、财务会计等多个领域的专业背景，
                  我能够为不同行业的客户提供全面且个性化的服务。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 业务板块 */}
      <section id="services" className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-center">业务板块</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service) => (
              <Link key={service.id} href={`/services/${service.id}`} className="block">
                <div className="card group hover:border-primary-500 hover:border cursor-pointer transition-all duration-300 h-full">
                  <div className="text-4xl mb-4 group-hover:scale-110 transition-transform">{service.icon}</div>
                  <h3 className="text-xl font-semibold mb-2 text-primary-600">{service.title}</h3>
                  <p className="text-gray-600">{service.description}</p>
                  <div className="mt-4 text-primary-500 flex items-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <span>查看详情</span>
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
                      <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* 职业经历 */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 mb-8 text-center">职业经历</h2>
          <div className="max-w-4xl mx-auto">
            <CareerTimeline experiences={careerExperiences.slice(0, 3)} />
            <div className="text-center mt-8">
              <Link href="/career" className="btn-primary">
                查看更多职业经历
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 技能展示部分 */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 mb-8 text-center">专业技能</h2>
          <div className="max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between mb-12">
            <div className="md:w-1/2 mb-8 md:mb-0 flex justify-center">
              <SkillRadarChart skills={radarSkills} width={300} height={300} />
            </div>
            <div className="md:w-1/2 md:pl-8">
              <h3 className="text-xl font-semibold text-primary-600 mb-4">全方位的专业能力</h3>
              <p className="text-gray-700 mb-4">
                我的职业生涯积累了多领域的专业技能，能够为不同类型的项目提供全面解决方案。
              </p>
              <p className="text-gray-700 mb-6">
                从数据安全到教育技术，从财务管理到软件开发，我具备跨领域协作和创新的能力。
              </p>
              <Link href="/skills" className="btn-primary">
                查看详细技能分析
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 客户评价 */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-center">客户评价</h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            来自各行业客户的真实评价，见证我的专业服务与合作成果
          </p>
          
          <TestimonialCarousel testimonials={testimonials} />
        </div>
      </section>

      {/* 项目案例 */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-center">精选项目案例</h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            以下是我最近完成的一些代表性项目，展示了我在不同领域的专业能力和解决问题的方法
          </p>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {featuredProjects.map((project) => (
              <Link key={project.id} href={`/projects/${project.id}`} className="block">
                <div className="bg-white rounded-lg shadow-md overflow-hidden h-full hover:shadow-xl transition-all duration-300">
                  <div className="h-48 bg-gray-200 relative">
                    <img
                      src={project.coverImage || '/images/Photo01.jpg'}
                      alt={project.title}
                      className="w-full h-full object-cover"
                    />
                    <div className="absolute bottom-0 left-0 bg-primary-500 text-white px-3 py-1 text-sm">
                      {services.find(s => s.id === project.serviceCategory)?.title}
                    </div>
                  </div>
                  <div className="p-5">
                    <h3 className="text-xl font-semibold text-gray-800 mb-2">{project.title}</h3>
                    <p className="text-gray-600 mb-4">{project.description}</p>
                    <div className="flex justify-between items-center mt-auto">
                      <span className="text-gray-500 text-sm">{project.client}</span>
                      <span className="text-primary-600 flex items-center text-sm font-medium">
                        查看详情
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                          <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
                        </svg>
                      </span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
          
          <div className="text-center mt-10">
            <Link href="/projects" className="btn-primary">
              查看全部项目
            </Link>
          </div>
        </div>
      </section>

      {/* 专业资质证书 */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-center">专业资质证书</h2>
          <p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
            多年来在不同领域获得的专业认证和资质证书，证明我的专业知识和能力
          </p>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
            {featuredCerts.map((cert) => (
              <div key={cert.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                <div className="h-40 bg-gray-100 relative">
                  <img
                    src={cert.image || '/images/Photo01.jpg'}
                    alt={cert.title}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                    <h3 className="text-white text-sm font-semibold">{cert.title}</h3>
                    <p className="text-white/80 text-xs">{cert.organization}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
          
          <div className="text-center mt-10">
            <Link href="/certifications" className="btn-primary">
              查看全部证书
            </Link>
          </div>
        </div>
      </section>

      {/* 常见问题部分 */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 mb-8 text-center">常见问题</h2>
          <div className="max-w-4xl mx-auto">
            <div className="space-y-4">
              {/* 展示3个常见问题 */}
              {faqs.slice(0, 3).map((faq) => (
                <div key={faq.id} className="bg-white rounded-lg shadow-sm p-5 border-l-4 border-primary-500">
                  <h3 className="text-lg font-semibold text-gray-800 mb-2">{faq.question}</h3>
                  <p className="text-gray-700">{faq.answer.length > 150 ? `${faq.answer.substring(0, 150)}...` : faq.answer}</p>
                </div>
              ))}
            </div>
            
            <div className="text-center mt-8">
              <Link href="/faq" className="btn-primary">
                查看全部问题解答
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 联系方式 */}
      <section id="contact" className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-center">联系方式</h2>
          <div className="max-w-md mx-auto">
            <div className="bg-white rounded-lg shadow-md p-8">
              <div className="flex items-center mb-4">
                <span className="text-primary-500 mr-3">📧</span>
                <p className="text-gray-700">lisa@example.com</p>
              </div>
              <div className="flex items-center mb-4">
                <span className="text-primary-500 mr-3">📱</span>
                <p className="text-gray-700">+86 123 4567 8910</p>
              </div>
              <div className="flex items-center">
                <span className="text-primary-500 mr-3">📍</span>
                <p className="text-gray-700">北京市朝阳区</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
} 